<template>
  <div class="container">
    <Cart @doSth="upData" @doSth2="smFlag = true" :jump_url="jump_url"></Cart>
    <SM v-show="smFlag" @closeModel="smFlag = false"></SM>
    <Active
      v-show="activeFlag"
      :map_id="map_id"
      :map_name="map_name"
      @closeActive="activeFlag = false"
    ></Active>
    <div class="in_banner">
      <div class="title_box">
        <div class="title_wenzi">{{ obj.data.title }}</div>
        <div class="map_name">
          <span><i class="game"></i>{{ obj.data.map_name }}</span>
          <span><i class="user"></i>{{ obj.data.user_name }}</span>
        </div>
      </div>
      <div class="timer-box">
        活动有效期：<span
          >{{ obj.data.str_st_time }} 至 {{ obj.data.str_ed_time }}
        </span>
      </div>
    </div>
    <div class="main">
      <!-- 满减券 -->
      <div class="lottery-bg" v-if="obj.data.cupon_type == 4">
        <div class="active" @click="activeFlag = true"></div>
        <div class="my-order">
          <a
            href="qfyygame:///type=web_action/?action_type=2&web_url=68747470733A2F2F73686F702E3532313167616D652E636F6D2F77656273697465322F232F6D794F72646572&login_mode=2"
          ></a>
        </div>
        <div class="in-lottery-bg">
          <div class="in-lottery-bg-left">
            <em>￥</em><span>{{ obj.data.cupon_discount }}</span>
          </div>
          <div class="in-lottery-bg-center">
            <h4>满{{ obj.data.cupon_condition }}元可用</h4>
            <p>限本活动页面领取并使用</p>
            <p>限本活动有效期内可用</p>
          </div>
        </div>
        <div class="lq-box">
          <span v-if="obj.data.repeat">仅限10张</span>
          <span v-if="!obj.data.repeat">仅限1张</span>
          <a
            href="javascript:;"
            @click="RcvCupon"
            class="lq-btn"
            v-if="obj.data.flag == 0"
            >领取
            <em v-show="obj.data.repeat && Number(10 - obj.data.remain_ct) != 0"
              >({{ Number(10 - obj.data.remain_ct) }})</em
            >
            <em v-show="!obj.data.repeat && Number(1 - obj.data.remain_ct) != 0"
              >({{ Number(1 - obj.data.remain_ct) }})</em
            >
          </a>
          <a
            href="javascript:;"
            @click="RcvCupon"
            class="bklq-btn"
            v-if="obj.data.flag == -1"
            >不可领取</a
          >
          <a
            href="javascript:;"
            @click="RcvCupon"
            class="ylq-btn"
            v-if="obj.data.flag == 1"
            >已领取
            <em v-show="obj.data.repeat && Number(10 - obj.data.remain_ct) != 0"
              >({{ Number(10 - obj.data.remain_ct) }})</em
            >
            <em v-show="!obj.data.repeat && Number(1 - obj.data.remain_ct) != 0"
              >({{ Number(1 - obj.data.remain_ct) }})</em
            >
          </a>
        </div>
      </div>
      <!-- 满减券 -->
      <!-- 折扣券 -->
      <div class="lottery-bg" v-if="obj.data.cupon_type == 3">
        <div class="active" @click="activeFlag = true"></div>
        <div class="my-order">
          <a
            href="qfyygame:///type=web_action/?action_type=2&web_url=68747470733A2F2F73686F702E3532313167616D652E636F6D2F77656273697465322F232F6D794F72646572&login_mode=2"
          ></a>
        </div>
        <div class="in-lottery-bg">
          <div class="in-lottery-bg-left">
            {{ (obj.data.cupon_discount / 10).toFixed(1) }}<em>折</em>
          </div>
          <div class="in-lottery-bg-center">
            <h4>满{{ obj.data.cupon_condition }}元可用</h4>
            <p>限本活动页面领取并使用</p>
            <p>限本活动有效期内可用</p>
            <p>单张优惠券最高减免2000元</p>
          </div>
        </div>
        <div class="lq-box">
          <span v-if="obj.data.repeat">仅限10张</span>
          <span v-if="!obj.data.repeat">仅限1张</span>
          <a
            href="javascript:;"
            @click="RcvCupon"
            class="lq-btn"
            v-if="obj.data.flag == 0"
            >领取
            <em v-show="obj.data.repeat && Number(10 - obj.data.remain_ct) != 0"
              >({{ Number(10 - obj.data.remain_ct) }})</em
            >
            <em v-show="!obj.data.repeat && Number(1 - obj.data.remain_ct) != 0"
              >({{ Number(1 - obj.data.remain_ct) }})</em
            >
          </a>
          <a
            href="javascript:;"
            @click="RcvCupon"
            class="bklq-btn"
            v-if="obj.data.flag == -1"
            >不可领取</a
          >
          <a
            href="javascript:;"
            @click="RcvCupon"
            class="ylq-btn"
            v-if="obj.data.flag == 1"
            >已领取
            <em v-show="obj.data.repeat && Number(10 - obj.data.remain_ct) != 0"
              >({{ Number(10 - obj.data.remain_ct) }})</em
            >
            <em v-show="!obj.data.repeat && Number(1 - obj.data.remain_ct) != 0"
              >({{ Number(1 - obj.data.remain_ct) }})</em
            >
          </a>
        </div>
      </div>
      <!-- 折扣券 -->
      <div class="active-title"></div>
      <div class="shop-list">
        <div class="shop-list-hd">
          <div class="search-box">
            <el-input
              v-model="searchName"
              @blur="searchShop"
              @keyup.enter="searchShop"
              placeholder="搜索商品"
            ></el-input>
            <!-- <input type="text" placeholder="搜索商品" v-model="searchName" /> -->
            <div class="search" @keyup.enter="searchShop()" @click="searchShop">
              搜索
            </div>
          </div>
          <div class="action-search-right">
            <span class="price" @click="priceSort">
              <i class="jiage"></i>
              价格
              <i
                v-bind:class="{
                  currentUp: priceResort === true,
                  currentDown: priceResort === false,
                  '': priceResort === '',
                }"
              ></i
            ></span>
          </div>
        </div>
        <div class="shop-list-bd">
          <ul>
            <li v-for="(item, index) in obj.goodLts" :key="index">
              <el-image v-bind:src="item.img" loading="lazy" fit="cover" />
              <p>{{ item.name }}</p>
              <div class="price-box">
                <span class="price">
                  <em>￥</em>{{ item.price }}<em>/{{ item.tm }}</em></span
                >
                <div
                  v-bind:class="{ 'cars-has': item.isAdd, cars: !item.isAdd }"
                  @click="cartFn(item)"
                >
                  <i v-show="item.isAdd">{{ item.shopAmount }}</i>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useStore } from "vuex"
import _service from "../service/index"
import Cart from "../components/cart.vue"
import SM from "../components/shuoming.vue"
import Active from "../components/active-center.vue"
import { ref, reactive, onMounted, computed, watch } from "vue"
import { useRouter } from "vue-router"
import { ElMessage } from "element-plus"
import { removeToken } from "@/untils/setToken"

const obj = reactive({ data: {}, goodLts: [] })
const activeFlag = ref(false)
const map_id = ref(0)
const map_name = ref("")
const smFlag = ref(false)
const page_index = ref(1)
const page_size = ref(20)
const total = ref(0)
const searchName = ref("")
const jump_url = ref("")
const priceResort = ref("")
var store = useStore()
let { getters, dispatch } = useStore()
const cart = computed(() => getters["carBox/cart"])
const upData = () => {
  page_index.value = 1
  page_size.value == 20
  priceResort.value = ""
  obj.goodLts = []
  GetGoodsLst()
}
let router = useRouter()
// 监听当前路由变化
watch(
  () => router.currentRoute.value,
  () => {
    removeToken("token")
    sessionStorage.removeItem("key")
  }
)

//获取基础数据
async function getData () {
  const res = await _service.GetData()
  map_id.value = res.data.map_id
  map_name.value = res.data.map_name
  jump_url.value = res.data.jump_url
  obj.data = res.data
  //console.log(obj.data);
}
//搜索商品
function searchShop () {
  page_index.value = 1
  page_size.value = 20
  priceResort.value = ""
  obj.goodLts = []
  GetGoodsLst()
}
//价格排序
function priceSort () {
  if (priceResort.value === "") {
    priceResort.value = true
  } else if (priceResort.value === true) {
    priceResort.value = false
  } else if (priceResort.value === false) {
    priceResort.value = ""
  }
  page_index.value = 1
  page_size.value == 20
  obj.goodLts = []
  GetGoodsLst()
}
//获取商品列表翻页
async function GetGoodsLst () {
  const res = await _service.GetGoodsLst(
    page_index.value,
    page_size.value,
    searchName.value,
    priceResort.value
  )
  total.value = Math.ceil(res.data.total / 20)
  console.log(res)
  if (res.data.data) {
    res.data.data.forEach((item) => {
      Reflect.set(item, "isCheck", true)
      Reflect.set(item, "isAdd", false)
    })

    obj.goodLts = [...obj.goodLts, ...res.data.data]
    store.commit("carBox/changeGoods", obj.goodLts)
    if (cart.value.length > 0) {
      obj.goodLts.forEach((item) => {
        cart.value.forEach((obj) => {
          if (item.gid == obj.gid) {
            item.isAdd = true
            item.shopAmount = obj.amount
          }
        })
      })
    }
  } else {
    obj.goodLts = []
  }
}
// 领取优惠券
async function RcvCupon () {
  const res = await _service.RcvCupon()
  console.log(res)
  if (res.errCode == 0) {
    ElMessage({
      message: res.msg,
      type: "success",
    })
  } else {
    ElMessage({
      message: res.msg,
      type: "error",
    })
  }

  getData()
}
//添加购物车
function cartFn (item) {
  dispatch("carBox/isAddShop", item)
  //GetGoodsLst();
}
//判断是否滚动到底部
function isScrollToBottom () {
  const scrollTop =
    document.documentElement.scrollTop || document.body.scrollTop
  const scrollHeight =
    document.documentElement.scrollHeight || document.body.scrollHeight
  const clientHeight =
    document.documentElement.clientHeight || document.body.clientHeight
  return scrollTop + clientHeight >= scrollHeight
}

onMounted(() => {
  getData()
  GetGoodsLst()
  window.addEventListener("scroll", function () {
    // 判断是否滚动到了底部
    if (isScrollToBottom()) {
      page_index.value++
      debugger
      if (total.value < page_index.value) {
        ElMessage({
          message: "已经到底部了……",
          type: "error",
        })
        return false
      } else {
        GetGoodsLst()
      }
    }
  })
});
</script>
<style scoped>
@import url(@/assets/css/index.css);
</style>
